<template>
  <div class="bottom-tab">
    <span class="tab-item">
      <img
        :src="
          $route.path.includes('/home')
            ? iconPathArr[0].selected
            : iconPathArr[0].normal
        "
        @click="goto('/home')"
        alt=""
      />
      <label :class="{ on: $route.path.includes('/home') }">首页</label>
    </span>
    <span class="tab-item">
      <img
        :src="
          $route.path.includes('/category')
            ? iconPathArr[1].selected
            : iconPathArr[1].normal
        "
        @click="goto('/category')"
        alt=""
      />
      <label :class="{ on: $route.path.includes('/category') }">分类</label>
    </span>
    <span class="tab-item">
      <img
        :src="
          $route.path.includes('/cart')
            ? iconPathArr[2].selected
            : iconPathArr[2].normal
        "
        @click="goto('/cart')"
        alt=""
      />
      <label :class="{ on: $route.path.includes('/cart') }">购物车</label>
    </span>
    <span class="tab-item">
      <img
        :src="
          $route.path.includes('/me')
            ? iconPathArr[3].selected
            : iconPathArr[3].normal
        "
        @click="goto('/me')"
        alt=""
      />
      <label :class="{ on: $route.path.includes('/me') }">我的</label>
    </span>
  </div>
</template>
<script>
export default {
  name: "Tabbar",
  data() {
    return {
      iconPathArr: [
        {
          normal: require("../../assets/img/home.png"),
          selected: require("../../assets/img/home-fill.png"),
        },
        {
          normal: require("../../assets/img/manage.png"),
          selected: require("../../assets/img/manage-fill.png"),
        },
        {
          normal: require("../../assets/img/transport.png"),
          selected: require("../../assets/img/transport-fill.png"),
        },
        {
          normal: require("../../assets/img/people.png"),
          selected: require("../../assets/img/people-fill.png"),
        },
      ],
    };
  },
  methods: {
    goto(path) {
      this.$router.replace(path);
    },
  },
};
</script>
<style>
  .bottom-tab{
        width:100%;
        height:50px;
        background-color:#fff;
        position:fixed;
        left:0;
        bottom:0;
        display:flex;
        z-index:999;
    }
   
    .tab-item{
         display:flex;
      flex:1;
      flex-direction:column;
      color:#999;
      font-size:13px;
      align-items:center;
      justify-content:center;
    }
     
      img{
          width:35%;
        margin-bottom:5px;
      }
        
      .on{
          color:red;
      }  
</style>